<template>
  <view class="returnGoods_container">
    <!-- 订单状态 -->
    <view class="orderStatus">
      <view>
        订单编号：
        <text>{{ sn }}</text>
      </view>
      <view>
        订单状态：
        <text>{{ orderStatusValue }}</text>
      </view>
    </view>

    <view v-if="orderItems.length">
      <Order :temporary_list="temporary_list" :orderItems="orderItems" :preview="!nextStepStatus"
        @updateGoodsList="updateGoodsList">
      </Order>
    </view>
    <view style="height: 180rpx" v-if="nextStepStatus"> </view>
    <view class="nextStep" v-if="nextStepStatus">
      <text @click="clickNextStep">下一步</text>
    </view>

    <view class="returnInfo" v-if="!nextStepStatus">
      <view class="title">退款信息</view>

      <view class="item">
        售后商品数量<text>*</text>
        <text>{{ afterSalseNum }}</text>
        <text> </text>
      </view>
      <view class="item" @click="refundReasonOpen">
        退货原因 <text>*</text>
        <image :src="staticUrl() + '/setting/right.png'" mode="aspectFit" class="right"></image>
        <text>{{ refundReasonValue }}</text>
      </view>
      <view class="item">退款金额
        <text>*</text>
        <text>￥{{ applyRefundPrice }}</text>
        <text> </text>
      </view>
    </view>

    <view class="voucher_box" v-if="!nextStepStatus">
      <view class="title">退货说明和凭证</view>
      <view class="text">
        <textarea placeholder="请输入内容" v-model="textarea" @input="sumfontnum"
          placeholder-style="font-size:28rpx;color:#ADADAD;" :maxlength="maxlength">
        </textarea>
        <text class="text2">{{ fontNum }}/{{ maxlength }}</text>
      </view>
      <view class="photograph">
        <view v-for="(item, index) in selectImgList" :key="index">
          <image style="width: 134.72rpx; height: 134.72rpx" :src="item" mode="aspectFit"></image>
        </view>
        <view @click="clickUpload">
          <image :src="staticUrl() + '/personalCenter/ameraIcon.png'"></image>
          <text>添加照片</text>
        </view>
      </view>
    </view>

    <view class="submit" v-if="!nextStepStatus"> <text @click="submit">提交</text> </view>

    <!-- 退款原因 -->
    <uni-popup ref="popup" background-color="#fff">
      <view class="title">
        <text>退货退款原因</text>
        <img :src="staticUrl() + '/home/close.png'" @click="refundReasonClose" />
      </view>
      <view v-for="(item, index) in refundReason" :key="index" class="item">
        <text>{{ item.reason }}</text>
        <checkbox :checked="item.checked" @click="clickItem(item)" class="checkbox" />
      </view>
      <view class="btn" @click="refundReasonClose">我知道了</view>
    </uni-popup>
  </view>
</template>

<script>
import { orderDetails, getAfterSalesReason, applyAfterSales } from '@/api/order/index.js'
import Order from '@/components/order/index.vue'

export default {
  components: { Order },
  data () {
    return {
      sn: '',
      orderStatusValue: '',
      orderItems: [],
      temporary_list: [],
      afterSalseNum: 0,
      refundReason: [],
      refundReasonValue: '',
      nextStepStatus: true,
      applyRefundPrice: '',
      maxlength: 300,
      fontNum: 0,
      textarea: '',
      selectImgList: [],
      selectUrlList: []
    }
  },
  onLoad (e) {
    this.sn = e.sn
    this.getList()
  },
  methods: {
    //
    submit () {
      if (!this.refundReasonValue) {
        uni.showToast({ icon: 'none', title: `请选择类型或原因`, mask: true })
        return
      }
      if (this.selectImgList.length > 0) {
        this.selectImgList.forEach((item, index) => {
          uni.uploadFile({
            url: 'https://www.xdyy100.com/wholesale/essential/common/common/upload/file', //上传图片api
            name: 'file',
            filePath: item,
            header: {
              accessToken: uni.getStorageSync('token'),
              'Content-type': 'multipart/form-data'
            },
            success: res => {
              let group = JSON.parse(res.data)
              if (group.code === 200) {
                this.selectUrlList.push(group.data.url)
              } else {
                uni.showToast({ title: group.msg, icon: 'none', mask: true })
              }
              if (index === this.selectImgList.length - 1) {
                const a = []
                this.orderItems
                  .filter(jj => {
                    return jj.checked
                  })
                  .forEach(item => {
                    a.push({
                      goodsId: item.goodsId,
                      num: item.nums,
                      orderItemSn: item.sn,
                      skuId: item.skuId
                    })
                  })
                const b = {
                  refundWay: 'ORIGINAL',
                  serviceType: 'RETURN_GOODS',
                  // 原因
                  reason: this.refundReasonValue,
                  // 描述
                  problemDesc: this.textarea,
                  images: this.selectUrlList + '',
                  goodsSkuList: a
                }
                applyAfterSales(this.sn, b).then(res => {
                  if (res.code === 200) {
                    uni.navigateTo({
                      url: '/pages/afterSales/afterSalesInfo?sn=' + res.data.sn
                    })
                  }
                })
              }
            }
          })
        })
      } else {
        const a = []
        this.orderItems
          .filter(jj => {
            return jj.checked
          })
          .forEach(item => {
            a.push({
              goodsId: item.goodsId,
              num: item.nums,
              orderItemSn: item.sn,
              skuId: item.skuId
            })
          })
        const b = {
          refundWay: 'ORIGINAL',
          serviceType: 'RETURN_GOODS',
          // 原因
          reason: this.refundReasonValue,
          // 描述
          problemDesc: this.textarea,
          images: this.selectUrlList + '',
          goodsSkuList: a
        }
        applyAfterSales(this.sn, b).then(res => {
          if (res.code === 200) {
            uni.navigateTo({
              url: '/pages/afterSales/afterSalesInfo?sn=' + res.data.sn
            })
          }
        })
      }
    },

    // 选中图片
    clickUpload () {
      let that = this
      uni.chooseImage({
        success (res) {
          that.selectImgList = res.tempFilePaths
        }
      })
    },
    // 统计字数
    sumfontnum (e) {
      this.fontNum = e.detail.value.length
    },
    // 预览
    clickNextStep () {
      const a = []
      this.orderItems
        .filter(jj => {
          return jj.checked
        })
        .forEach(item => {
          this.afterSalseNum += item.nums
          a.push({ goodsId: item.goodsId, num: item.nums, orderItemSn: item.sn, skuId: item.skuId })
        })

      const b = {
        refundWay: 'ORIGINAL',
        serviceType: 'RETURN_GOODS',
        preview: true,
        goodsSkuList: a
      }
      applyAfterSales(this.sn, b).then(res => {
        if (res.code === 200) {
          this.nextStepStatus = false
          this.applyRefundPrice = res.data.applyRefundPrice
        }
      })
    },
    updateGoodsList (val) {
      this.orderItems = val
    },
    // 退货状态 原因
    clickItem (item) {
      this.refundReason.forEach(i => (i.checked = false))
      item.checked = !item.checked
      this.refundReasonValue = item.reason
    },
    // 退货原因 popup
    refundReasonOpen () {
      this.$refs.popup.open('bottom')
    },
    refundReasonClose () {
      this.$refs.popup.close()
    },
    // 获取数据
    getList () {
      orderDetails(this.sn, { unfolded: false }).then(res => {
        if (res.code === 200) {
          this.orderStatusValue = res.data.orderStatusValue
          res.data.orderItems.forEach(item => {
            this.$set(item, 'checked', true)
            this.$set(item, 'nums', item.num)
          })
          this.orderItems = res.data.orderItems
          this.temporary_list = res.data.orderItems.slice(0, 2)
        }
      })
      getAfterSalesReason('RETURN_GOODS').then(res => {
        if (res.code === 200) {
          res.data.forEach(i => {
            this.$set(i, 'checked', false)
          })
          this.refundReason = res.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.returnGoods_container {
  width: 100%;
  min-height: 100vh;
  background: #f9f9f9;
  padding-top: 25rpx;
}

.orderStatus {
  background: #fff;
  border-radius: 11rpx;
  margin: 0 25rpx;
  margin-bottom: 25rpx;
  padding: 45.83rpx 20.14rpx;

  view {
    font-size: 28rpx;
    color: #585858;

    text {
      margin-right: 22.22rpx;
    }
  }

  view:nth-child(2) {
    margin-top: 31.25rpx;
  }
}

.nextStep {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150rpx;
  background: #fff;
  text-align: end;

  text {
    display: inline-block;
    width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    font-size: 29rpx;
    color: #fff;
    background: #2871fc;
    border-radius: 40rpx;
    margin: 30rpx 50rpx 0 0;
  }
}

.returnInfo {
  margin: 0 25rpx;
  margin-top: 25rpx;
  background: #fff;
  border-radius: 11rpx;
  font-size: 33rpx;

  .title {
    font-weight: bold;
    padding: 57.64rpx 0 36.11rpx 22.22rpx;
  }

  .item {
    padding: 42.36rpx 0 43.06rpx 22.22rpx;
    border-top: 1px solid #f9f9f9;

    text {
      font-size: 29rpx;
      color: #ef231b;
    }

    text:nth-child(3) {
      float: right;
      color: #000;
    }

    text:nth-child(2) {
      float: right;
      padding-right: 33rpx;
    }

    image:nth-child(2) {
      float: right;
      padding-right: 44rpx;
    }

    .right {
      width: 9.72rpx;
      height: 15.28rpx;
      float: right;
      padding: 18.5rpx 50rpx;
    }
  }
}

::v-deep .uni-popup {
  .title {
    font-size: 36rpx;
    text-align: center;
    border-radius: 22rpx 22rpx 0rpx 0rpx;
    padding: 32.64rpx 0;
    position: relative;
    font-size: 36rpx;
    font-weight: bold;
    border-bottom: 1px solid #f9f9f9;
    margin-bottom: 30rpx;

    img {
      position: absolute;
      top: 32rpx;
      right: 46.53rpx;
      width: 19.44rpx;
      height: 19.44rpx;
      padding: 20rpx;
    }
  }

  .item {
    height: 106.94rpx;
    line-height: 106.94rpx;
    font-size: 29rpx;
    padding: 0 0 0 46.53rpx;
    display: flex;
    justify-content: space-between;

    .checkbox {
      padding: 0 30rpx;
    }
  }

  .btn {
    height: 80rpx;
    color: #fff;
    background: #2871fc;
    font-size: 29rpx;
    border-radius: 40rpx;
    line-height: 80rpx;
    text-align: center;
    margin: 0 36.11rpx;
    margin-top: 50rpx;
  }
}

.voucher_box {
  height: 663rpx;
  background: #ffffff;
  border-radius: 11rpx;
  margin: 25rpx;

  .title {
    font-weight: bold;
    padding: 57.64rpx 0 36.11rpx 22.22rpx;
  }

  .text {
    position: relative;

    textarea {
      box-sizing: border-box;
      width: 658rpx;
      height: 339rpx;
      background: #f9f9f9;
      border-radius: 11rpx;
      margin: 0 20.83rpx;
      padding: 30.56rpx 22.22rpx 50.56rpx;
    }

    .text2 {
      position: absolute;
      bottom: 45.33rpx;
      right: 49.31rpx;
      font-size: 25rpx;
      color: #adadad;
    }
  }

  .photograph {
    display: flex;
    flex-flow: row wrap;

    view {
      width: 134.72rpx;
      height: 134.72rpx;
      display: flex;
      flex-flow: column nowrap;
      justify-content: center;
      align-items: center;
      margin-top: 29.86rpx;
      margin-left: 21.53rpx;
    }

    view:last-child {
      border: 1px dashed #adadad;
      border-radius: 10rpx;
    }

    image {
      width: 33.33rpx;
      height: 30.56rpx;
    }

    text {
      font-size: 19rpx;
      color: #adadad;
      line-height: 31rpx;
    }
  }
}

.submit {
  height: 146rpx;
  background: #fff;
  font-size: 29rpx;

  text {
    display: inline-block;
    width: 678rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    background: #2871fc;
    border-radius: 40rpx;
    margin: 33.33rpx 36.11rpx 0;
  }
}
</style>
